import { reactive } from './func/reactive.js';
// import { effect } from './effect/effect.js';
import { computed } from './func/computed.js';
import { effect } from './effect/effect.js';
import { watch } from './func/watch.js';

const obj = reactive({
  a: 1,
  b: 2,
});

const stopWatch = watch(
  () => obj.a,
  (newVal, oldVal) => {
    console.log('obj.a 变化了', newVal, oldVal);
  },
  {
    immediate: true,
  }
);

obj.a = 100;
stopWatch();
obj.a = 200;
// // 懒执行函数需要手动调用
// let isRun = false;
// const lazyEffectFn = effect(
//   () => {
//     if (obj.a > 100) {
//       console.log('obj.a 大于 100');
//     } else {
//       obj.b = obj.a + 1;
//       console.log('obj.a 小于等于 100');
//     }
//   },
//   {
//     lazy: true,
//     scheduler: (eff) => {
//       Promise.resolve().then(() => {
//         if (!isRun) {
//           eff();
//           isRun = true;
//         }
//       });
//     },
//   }
// );
// lazyEffectFn();
// // obj.a = 1001;
// obj.a = 100;
// obj.b = 1002;
// obj.a++;
// obj.a++;
// obj.a++;
// obj.a++;
// obj.a++;
// obj.a++;
// obj.a++;
// obj.a++;
// obj.a++;
// obj.a++;
// obj.a++;
// obj.a++;
// obj.a++;
// obj.a++;
// obj.a++;
// obj.a++;

// const computedVal = computed(() => {
//   console.log('computedVal 被调用');
//   return obj.a + obj.b;
// });
// console.log(computedVal.value);

// obj.a++;
// obj.b++;
// console.log(computedVal.value);
// console.log(computedVal.value);
// console.log(computedVal.value);
// console.log(computedVal.value);

// // 模拟render函数
// effect(() => {
//   console.log('render 被调用', computedVal.value);
// });

// obj.a++;
// obj.b++;
